<template>
  <div class="headerDiv">
    <div class="header">企业排水智慧监管平台</div>
    <div class="message">
      <div></div>
      <div>{{ time }}</div>
    </div>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "HeaderDiv",
  props: {},
  components: {},
  data() {
    return {
      time: "",
    };
  },
  computed: {},
  watch: {},
  methods: {},
  beforeCreate() {},
  created() {
    moment.locale("zh-cn");
    setInterval(() => {
      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  beforeMount() {},
  mounted() {},
  updated() {},

  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="less" scoped>
.headerDiv {
  width: 100%;
  height: 133px;
  background-image: url("../assets/header.png");
  position: relative;
  .header {
    // width: 1000px;
    height: 100px;
    line-height: 110px;
    position: absolute;
    left: 50%;
    font-size: 60px;
    font-weight: 600;
    transform: translateX(-50%);
    -webkit-background-clip: text;
    color: rgb(241, 241, 241);
    letter-spacing: 8px;
    text-shadow: 0px 1px 0px #999999, 0px 2px 0px #888, 0px 3px 0px #777,
      0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
      0px 8px 7px #001135;
    // background-image: -webkit-linear-gradient(
    //   left,
    //   blue,
    //   #66ffff 10%,
    //   #cc00ff 20%,
    //   #cc00cc 30%,
    //   #ccccff 40%,
    //   #00ffff 50%,
    //   #ccccff 60%,
    //   #cc00cc 70%,
    //   #cc00ff 80%,
    //   #66ffff 90%,
    //   blue 100%
    // );
    // -webkit-text-fill-color: transparent;
    // -webkit-background-clip: text;
    // -webkit-background-size: 200% 100%;
    // -webkit-animation: masked-animation 4s linear infinite;
  }
  @keyframes masked-animation {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -100% 0;
    }
  }
  .message {
    display: flex;
    position: absolute;
    bottom: 13px;
    font-size: 20px;
    color: #ffffff;
    line-height: 26px;
    text-shadow: 0px 0px 20px rgba(0, 112, 255, 0.8);
    background: linear-gradient(to bottom, #ffffff, #9ad3ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-left: 48px;
    padding-right: 62px;
    justify-content: space-between;
    width: 100%;
    & > div {
      display: flex;
      align-items: center;
      img {
        margin-right: 6px;
      }
    }
  }
}
</style>
